<template>
  <div class='classify' id='classify'>
    <Heads types="classify"></Heads>

    <div class="content">
      <van-tree-select
        height="11rem"
        :items="items"
        :main-active-index.sync="activeKey"
        :click-nav="getlist(activeKey)"
      >
        <template slot="content">
          <van-grid :border="false" :column-num="2" v-if="typeList">
            <van-grid-item
              :style="{height:'3.5rem'}"
              v-for="(l) in typeList"
              :key="l.goods_id"
              :text="l.goods_info.title"
              :to="{
                name: 'Classify-details-tradeItemId',
                params: { 'tradeItemId': l.goods_id }
              }"
            >
              <van-image :src="l.goods_info.picture" lazy-load
              width="100%" height="90%"/>
              <div class="goods_info">
                <b
                  class="price_info"
                  style="font-size:.3rem;margin-right:.2rem;"
                  >¥{{ (l.sku.price*1).toFixed(2) }}</b
                >

                <span class="fav_num"
                  ><van-tag type="warning">new</van-tag></span>
              </div>
            </van-grid-item>
          </van-grid>
          <div v-else :style="{
            height: '.59rem','background-color': '#ddd',color: '#bdc0c5','font-size': '.25rem','text-align': 'center',margin: 'auto','line-height': '.59rem','box-sizing': 'border-box'
            }" class="no-more">- 暂无此类商品,敬请期待 -</div>
        </template>
      </van-tree-select>
    </div>

  </div>
</template>

<script>
// import http from '@/utils/axios'
import { mapState, mapActions } from 'vuex'
import Vue from 'vue'
import { TreeSelect, Grid, GridItem, Image, Lazyload, Tag } from 'vant'
Vue.use(TreeSelect).use(Grid).use(GridItem).use(Image).use(Lazyload).use(Tag)
export default {
  data () {
    return {
      activeKey: 0,
      items: [
        { text: '全部商品', type: 'all', children: [], dot: false, info: '' },
        { text: '家居', type: 'furnishings', children: [], dot: false, info: '' },
        { text: '衣服', type: 'clothes', children: [], dot: false, info: '' },
        { text: '手机', type: 'mobilephone', children: [], dot: false, info: '' },
        { text: '电脑', type: 'computers', children: [], dot: false, info: '' },
        { text: '食品', type: 'foods', children: [], dot: false, info: '' },
        { text: '化妆品', type: 'cosmetics', children: [], dot: false, info: '' },
        { text: '虚拟商品', type: 'virtualgoods', children: [], dot: false, info: '' }
      ],
      goodstype: 'all'
    }
  },
  computed: {
    ...mapState('goodsModule', ['goodsList']),
    typeList: {
      get: function () {
        if (this.goodsList) {
          if (this.goodstype === 'all') {
            return [...this.goodsList]
          } else {
            const arr = this.goodsList.filter((item) => {
              return item.goods_type === this.goodstype
            })
            if (arr.length === 0) {
              return null
            } else {
              return arr
            }
          }
        } else {
          return null
        }
      },
      // setter
      set: function (newValue) {
      }
    }
  },
  mounted () {
    // document.getElementById('classify').style = 'background: #fff;'

    this.getGoodsListAction()
  },
  methods: {
    ...mapActions('goodsModule', ['getGoodsListAction']),
    getlist (activeKey) {
      // console.log(this.items[activeKey].type)
      this.goodstype = this.items[activeKey].type
    }
  }
}
</script>

<style lang='scss' scoped>
.classify {
  .content {
    .van-tree-select {
      // .classify .van-tree-select__nav {
      //   .van-tree-select__nav-item:last-of-type {
      //     // padding-bottom: 2rem !important;
      //   }
      // }
      .van-tree-select__content {
        .van-grid {
          .van-grid-item {
            .van-grid-item__content .van-grid-item__content--center {
              padding: 0.1rem .1rem !important;
            }
          }
        }
      }
    }
  }
}
</style>
